<template>
	<view class="page-total">
		<view class="cu-modal bottom-modal" :class="{ show: isShow }" @click="hide()">
			<view class="cu-dialog">
				<view class="coupon-tab flex flex-center">
					<view class="tab action">
						<text>可用优惠券</text>
						<text class="line"></text>
					</view>
				</view>
				<!-- 优惠券数据 -->
				<view class="coupon-data">
					<view class="coupon-list">
						<view class="list" v-for="(item,index) in data" :key="index" @click.stop="onTab(item)">
							<view class="coupon-price">
								<view class="discounts">
									<text class="min">￥</text>
									<text class="max">{{item.price}}</text>
								</view>
								<view class="full-reduction"><text>满{{item.full_price}}元减{{item.price}}元</text></view>
								<view class="jag"></view>
							</view>
							<view class="coupon-info">
								<view class="check">
									<view :class="TabShow==item.id?'iconfont icon-checked':'iconfont icon-check'"></view>
								</view>
								<view class="info-title">
									<view class="tag">
										<text>限品类券</text>
									</view>
									<view class="title">
										<text>仅可购买会员专区商品</text>
									</view>
								</view>
								<view class="date-get">
									<view class="date">
										<text>结束时间:{{item.end_time}}</text>
									</view>
									<!-- <view class="get">
										<text>点击领取</text>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<!--确认 -->
				<view class="cpupon-confirm">
					<view class="confirm" @click.stop="onConfirm">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			//控制显示
			data:{
				type: [Array],
				default: []
			},
		},
		data() {
			return {
				isShow: false,
				TabShow: 0,
				dataInfo:''
			};
		},
		methods:{
			show(){
				this.isShow = true;
			},
			hide(){
				this.isShow = false;
			},
			/**
			 * tab 点击
			 */
			onTab(index){
				if(index.id==this.TabShow){
					this.TabShow = 0;
					this.dataInfo = ''
				}else{
					this.TabShow = index.id;
					this.dataInfo = index
				}
			},
			/**
			 * 确认点击
			 */
			onConfirm(){
				this.$emit('finish',this.dataInfo)
				this.hide();
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'UseCoupon.scss';
</style>
